/* init Dom in common. */
.yx-common-menu,
.yx-common-logo,
.yx-common-info,
.yx-common-ucan,
.yx-common-list,
.yx-common-more,
.yx-common-background{
  margin: 0;
  padding: 0;
  font-family: "PingFang HK";
  list-style: none;

  a{
    text-decoration: none;
  }
}

.yx-common-menu{
  width: 40px;
  height: 40px;
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999999;
  display: none;

  &.active{
    display: block;
  }
}

.yx-common-background{
  position: absolute;
  top:0;
  left:0;
  background-color: rgba(0,0,0,1);
  z-index: 9999998;
  display: none;

  &.active{
    display: block;
  }
}

.yx-common-logo{
  padding: 60px 0 26px 0;
  text-align: center;
}
.yx-common-info{
  font-size: 18px;
  color: #9B9B9B;
  text-align: center;
  font-weight: 300;
}

.yx-common-ucan{
  font-size: 24px;
  font-weight: 100;
  color: #ffffff;
  text-align: center;
  padding: 60px 20px 10px 20px;
}

.yx-common-list{
  display: block;
  padding: 0 20px 30px 20px;
  text-align: center;

  a{
    color: #f1f1f1;
    font-weight: 200;
    font-size: 14px;
  }
}
.yx-common-more{
  text-align: center;
  a{
    padding: 6px 26px;
    background-color: #5AC843;
    color: #ffffff;
    font-size: 16px;
    font-weight: 100;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}

//-----
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}
.animated.hinge {
  animation-duration: 2s;
}
@keyframes wobble {
  0% {
    transform: none;
  }
  15% {
    transform: translate3d(-25%, 0px, 0px) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0px, 0px) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0px, 0px) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0px, 0px) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    transform: none;
  }
}
.wobble {
  animation-name: wobble;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}